<template>
  <el-select v-model="sel" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" @change="onChange" style="width:100%;">
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
    </el-option>
  </el-select>
</template>
<script>

import {roadListBearby} from '@/api/checkRoad'
export default {
    props: {
        value: {
            type: [Number, String, null],
            default: null
        },
        params: {
            type: Object,
            default:()=>{}
        }
    },
    created(){
        this.remoteMethod()
    },
    data() {
        return {
            loading: true,
            sel: '',
            options: [],
            queryParams: {}
        }
    },
    methods: {
        search(location) {
            this.queryParams.location = location;
            this.remoteMethod()
        },
        remoteMethod(query) {
            this.queryParams.name = query||null;
            this.loading = true;
            roadListBearby(this.queryParams).then(res => {
                this.loading = false;
                this.options = res.data||[];
            }).catch(e => this.loading = false)
        },
        onChange(e) {
            this.$emit('input', e)
            const item = this.options.find(i => i.id == e);
            this.$emit('change', item||{})
        }
    }
}
</script>